<template>
  <button @click="isShow=true" >显示盒子</button>
  <button @click="isShow=false">隐藏盒子</button>
    <!-- <button @click="isShow = !isShow">点击切换（v-if）</button> -->
  <!-- 🔔transition 注意点：只能包一个标签或者一个组件 -->
  <transition name="v">
    <div v-if="isShow" class="box">盒子</div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isShow = ref(false)

    return { isShow }
  }
}
</script>

<style  lang="less" scoped >
.box{
    width: 200px;
    height: 200px;
    background: red;
}

// Vue 动画类 - enter - 元素显示的时候添加
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 5s;
}
.v-enter-to {
  opacity: 1;
}
// Vue 动画类 - leave - 元素显示的时候添加
.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: all 5s;
}
.v-leave-to {
  opacity: 0;
}
</style>
